import {
  cateList
} from '@/api/cate'
import {
  attributes,
  addAttribute,
  changeAttribute
} from '@/api/attribute'
export default {
  data() {
    return {
      // 3级分类数据
      cateList: [],
      // 选中的分类数组
      selectedCateKeys: [],
      // 选中的分类id
      cateId: '',
      // 级联菜单配置项
      cateProps: {
        value: 'cat_id',
        label: 'cat_name',
        children: 'children'
      },
      // 默认激活的tab选项卡
      activeName: 'many',
      // tab栏的选中类型
      attr_sel: 'many',
      // 添加属性的按钮是否可点
      isButtonDisabled: true,
      // 动态参数的数据
      manyTableData: [],
      // 静态属性的数据
      onlyTableData: [],
      // 控制添加属性或者参数的对话框显示
      addDialogVisible: false,
      titleText: '动态参数',
      // 添加属性的表单数据
      addForm: {
        attr_name: ''
      },
      // 添加的验证规则
      addFormRules: {
        attr_name: [{
          required: true,
          message: '请输入名称',
          trigger: 'blur'
        }]
      }

    }
  },
  created() {
    this.getCateList()
  },
  methods: {
    // 获取分类数据
    async getCateList() {
      const {
        meta,
        data
      } = await cateList({
        type: 3
      })
      if (meta.status !== 200) {
        return this.$message.error('数据获取失败')
      }
      this.cateList = data
    },
    // 级联菜单改变时
    async handleChange() {
      // 如果只选中1,2级分类，那么下拉菜单不选中任何分类
      if (this.selectedCateKeys.length < 3) {
        this.selectedCateKeys = []
        // 选中了父级后，让级联菜单隐藏
        this.$refs.cateHandle.dropDownVisible = false
        return
      }
      // 选中的3级分类
      // 获取3级分类id
      this.cateId = this.selectedCateKeys[this.selectedCateKeys.length - 1]
      // 获取动态参数
      this.manyTableData = await this.getAttribute('many')
      this.manyTableData.forEach(v => {
        v.attr_vals = v.attr_vals.split(',')
        // 这种写法是错误的写法,属性是后面添加的，改变数据，不会更新dom
        // v.inputVisible = false
        // v.inputValue = ''
        // 解决方法：Vue.$set()设置
        this.$set(v, 'inputVisible', false)
        this.$set(v, 'inputValue', '')
      })
      // 把属性值转换为数组
      this.onlyTableData = await this.getAttribute('only')
      this.onlyTableData.forEach(v => {
        v.attr_vals = v.attr_vals.split(' ')
        this.$set(v, 'inputVisible', false)
        this.$set(v, 'inputValue', '')
      })
      // 添加按钮可点
      this.isButtonDisabled = false
      // 选中了父级后，让级联菜单隐藏
      this.$refs.cateHandle.dropDownVisible = false
    },
    // 获取动态参数和静态属性
    async getAttribute(type) {
      const {
        meta,
        data
      } = await attributes(this.cateId, type)
      if (meta.status !== 200) {
        return false
      }
      return data
    },
    // tab栏切换的事件
    handleTabClick() {
      console.log(this.activeName)
    },
    // 展开添加的对话框
    showAddDialog(title, type) {
      this.titleText = title
      this.attr_sel = type
      this.addDialogVisible = true
    },
    // 完成参数的添加
    addParams() {
      this.$refs.addFormRef.validate(async valid => {
        if (!valid) return
        const {
          meta
        } = await addAttribute(this.cateId, this.addForm.attr_name, this.attr_sel)
        if (meta.status !== 201) {
          return this.$message.$error('添加失败')
        }
        this.$message.success('添加成功')
        this.addDialogVisible = false
        if (this.attr_sel === 'many') {
          this.manyTableData = await this.getAttribute('many')
        } else {
          this.onlyTableData = await this.getAttribute('only')
        }
      })
    },
    // 监听关闭添加属性或者参数的对话框事件
    addDialogClosed() {
      this.$refs.addFormRef.resetFields()
    },
    // 点击+tag按钮，按钮隐藏，文本输入框显示
    async showInput(row) {
      row.inputVisible = true
      // 让input获取焦点
      // dom的更新是异步的，可以使用nextTick实现dom更新完成后再做其他的事情
      await this.$nextTick()
      this.$refs.saveTagInput.focus()
    },
    // 属性值的添加
    async handleInputConfirm(row) {
      if (row.inputValue.trim().length === 0) {
        row.inputVisible = false
        return
      }
      // 该数据追加到属性值的数组中
      row.attr_vals.push(row.inputValue)
      // this.saveAttr(row)
      const result = await this.saveAttr(row)
      if (!result) {
        return this.$message.error('添加属性值失败')
      }
      this.$message.success('添加属性值成功')
    },
    // 属性值的删除
    async delAttr(row, index) {
      // 从数组中删除该数据
      row.attr_vals.splice(index, 1)
      // this.saveAttr(row)
      const result = await this.saveAttr(row)
      if (!result) {
        return this.$message.error('删除属性值失败')
      }
      this.$message.success('删除属性值成功')
    },
    // 保存属性的公共方法
    async saveAttr(row) {
      let attrVals = ''
      if (this.attr_sel === 'many') {
        attrVals = row.attr_vals.join(',')
      } else {
        attrVals = row.attr_vals.join(' ')
      }
      const {
        meta
      } = await changeAttribute(this.cateId, row.attr_id, {
        attr_vals: attrVals,
        attr_name: row.attr_name,
        attr_sel: this.attr_sel
      })
      if (meta.status !== 200) {
        return false
      }
      // 重新显示按钮
      row.inputVisible = false
      // 文本框的值置空
      row.inputValue = ''
      return true

      /*  if (meta.status !== 200) {
         return this.$message.error('操作失败')
       }
       this.$message.success('属性值更新成功')
       // 重新显示按钮
       row.inputVisible = false
       // 文本框的值置空
       row.inputValue = '' */
    }
  }
}
